import React from 'react'
// ===================================================================== Temp
import { Tag } from 'antd'
import Select from '@antd/form/select'
// ===================================================================== Declare
const { $Lazy, $fn } = window
// ===================================================================== Lazy
const $cache 			= $Lazy.file(()=>import('#private/cache-api'))
const Modal 			= $Lazy.state(()=>import('@antd/modal'))
const Input 			= $Lazy.load(()=>import('@antd/form/input'))
const Radio 			= $Lazy.load(()=>import('@antd/form/radio'))
const Button 			= $Lazy.load(()=>import('@antd/button'))
// ===================================================================== component

const spec_data = [{name: '按条码段', value: 1}, {name: '按条码号列表', value: 0}]
const ex_data	= [{name: '按实验段', value: 1}, {name: '按实验号列表', value: 0}]

class Index extends React.Component{
	state = {
		spec_mode: 1,
		ex_mode: 1,
		modalForm: {
			start_spec_code: '',
			end_spec_code: '',
			spec_code_list: [],
			start_experiment_num: '',
			end_experiment_num: '',
			experiment_num_list: [],
			hosp_id_list: []
		},
		hosp_data: [],
		hosp_list: [],
		spec_codes: '',
		experiment_nums: ''
	}
	
	submit = {}
	
	open = searchRef => {
		this.searchRef = searchRef()
		this.modal.open()
	}
	
	componentDidMount() {
		this.getSelect()
	}
	
	// 获取下拉数据
	getSelect = () => {
		$cache.then( async f => {
			// 医院
			const data = await f.getCache( { api:'hospital' })
			this.setState({ hosp_data: data })
		})
	}
	
	delHosp = value => {
		const { hosp_list } = this.state
		const data = hosp_list.filter(v => v.value !== value)
		this.setState({hosp_list: data})
	}
	
	key = 0
	
	render(){
		const { spec_mode, ex_mode, hosp_data, modalForm, hosp_list } = this.state
		return <>
			<Modal
				title	= '高级搜索'
				width 	= {700}
				height  = {500}
				okText	= '搜索'
				noCancel
				onRef	= { ref => this.modal = ref }
				isFullScroll
				onOk	= { () => {
					const { modalForm, hosp_list } = this.state
					if (modalForm.start_spec_code.length) {
						if(!modalForm.end_spec_code.length) {
							$fn.msg.warning('请填写结束条码')
							return
						}
					}
					if (modalForm.end_spec_code.length) {
						if(!modalForm.start_spec_code.length) {
							$fn.msg.warning('请填写开始条码')
							return
						}
					}
					if (modalForm.start_spec_code.length && modalForm.end_spec_code.length) {
						if (modalForm.start_spec_code.length !== 12) {
							$fn.msg.warning('开始条码必须为12位')
							return
						}
						if (modalForm.end_spec_code.length !== 12) {
							$fn.msg.warning('结束条码必须为12位')
							return
						}
						if (modalForm.end_spec_code < modalForm.start_spec_code) {
							$fn.msg.warning('结束条码必须大于开始条码')
							return
						}
						if (modalForm.end_spec_code - modalForm.start_spec_code > 500) {
							$fn.msg.warning('开始条码和结束条码区间必须小于500')
							return
						}
					}
					if (modalForm.start_experiment_num.length) {
						if (!modalForm.end_experiment_num.length) {
							$fn.msg.warning('请填写结束实验号')
							return
						}
					}
					if (modalForm.end_experiment_num.length) {
						if (!modalForm.start_experiment_num.length) {
							$fn.msg.warning('请填写开始实验号')
							return
						}
					}
					if (modalForm.start_experiment_num.length && modalForm.end_experiment_num.length) {
						const start = modalForm.start_experiment_num.match(/\d+/)[0]
						const end = modalForm.end_experiment_num.match(/\d+/)[0]
						if (end < start) {
							$fn.msg.warning('结束实验号必须大于开始实验号')
							return
						}
						if (end - start > 500) {
							$fn.msg.warning('开始实验号和结束实验号区间必须小于500')
							return
						}
					}
					const data = hosp_list.map(v => v.value)
					this.setState({modalForm: {...modalForm, hosp_id_list: data}}, () => this.searchRef.onSubmit(this.state.modalForm) )
					this.modal.close()
				} }
				btnSuffix = {<Button onClick={() => {
					this.key++
					this.setState({hosp_list: [], spec_codes: '', experiment_nums: '', modalForm: { start_spec_code: '', end_spec_code: '', spec_code_list: [], start_experiment_num: '', end_experiment_num: '', experiment_num_list: [], hosp_id_list: [] }}, () => this.searchRef.onSubmit(this.state.modalForm) )
				}} style={{width:100, marginLeft: 25}} size='middle' ghost type='primary'>重置</Button> }
				close	= { () => {
					
				}}
			>
				<div className='fv plr20 superSearch' key={this.key}>
					<div className='fxm lh30 mb5'>
						<span style={{width: 60}} className='tr pr10'>条码号</span>
						<div>
							<Radio data={spec_data} value={spec_mode} onChanged={ ({value}) => {
								this.setState({spec_mode: value, modalForm: {...modalForm, start_spec_code: '', end_spec_code: '', spec_code_list: []}})
							} } />
						</div>
					</div>
					{
						spec_mode ? <div className='fx lh30 mb10' style={{marginLeft: 60, borderRadius: 5, backgroundColor: '#eee'}}>
							<Input key='input1' type='number' outer p='开始条码号' className='r5px' style={{height: 30, borderRadius: 5}} onChange={ value =>{
								this.setState({modalForm: {...modalForm, start_spec_code: value}})
							}} />
								<div className='tc cf' style={{width:30}}> ~ </div>
							<Input key='input2' outer p='结束条码号' className='r5px' style={{height: 30, borderRadius: 5}} onChange={ value =>{
								this.setState({modalForm: {...modalForm, end_spec_code: value}})
							}} />
						</div>
						:
						<div className='mb10' style={{marginLeft: 60}}>
							<Input key='input3' outer p='请输入条码号' mode='textarea' onChange={ value =>{
								const spec_codes =  value.match(/\d{14}|\d{12}/g)
								const data = Array.from(new Set(spec_codes))
								this.setState({modalForm:{...modalForm, spec_code_list: data}, spec_codes: value})
							}} />
						</div>
					}
					<div className='fxm lh30 mb5'>
						<span style={{width: 60}} className='tr pr10'>实验号</span>
						<div>
							<Radio data={ex_data} value={ex_mode} onChanged={ ({value}) => {
								this.setState({ex_mode: value, modalForm: {...modalForm, start_experiment_num: '', end_experiment_num: '', experiment_num_list: []}})
							} } />
						</div>
					</div>
					{
						ex_mode ? <div className='fx lh30 mb10' style={{marginLeft: 60, borderRadius: 5, backgroundColor: '#eee'}}>
							<Input key='input4' outer p='开始实验号' className='r5px' style={{height: 30, borderRadius: 5}} onChange={ value =>{
								this.setState({modalForm: {...modalForm, start_experiment_num: value}})
							}} />
								<div className='tc cf' style={{width:30}}> ~ </div>
							<Input key='input5' outer p='结束实验号' className='r5px' style={{height: 30, borderRadius: 5}} onChange={ value =>{
								this.setState({modalForm: {...modalForm, end_experiment_num: value}})
							}} />
						</div>
						:
						<div className='mb10' style={{marginLeft: 60}}>
							<Input key='input6' outer p='请输入实验号' mode='textarea' onBlur={() => {
								let { experiment_nums } = this.state
								experiment_nums = experiment_nums.replace(/\s+|，/g,',')
								experiment_nums = experiment_nums.split(',')
								const data = Array.from(new Set(experiment_nums))
								this.setState({modalForm:{...modalForm, experiment_num_list: data}})
							}} onChange={ value =>{
								this.setState({experiment_nums: value})
							}} />
						</div>
					}
					<div className='fxm lh30 mb5'>
						<span style={{width: 60}} className='tr pr10'>医院</span>
						<div className='ex lh30'>
							<Select p='请选择医院' data={hosp_data} ref={ref => this.selectRef = ref} onChange={ value =>{
								const data = hosp_data.find(v => v.value === value)
								this.setState({hosp_list: [...hosp_list, data]})
								this.selectRef.clear()
							}} />
						</div>
					</div>
					<div style={{marginLeft: 60}}>
						{ hosp_list.map(v => <Tag key={v.value} closable onClose={ () => this.delHosp(v.value)}>{v.name}</Tag>) }
					</div>
				</div>
			</Modal>
		</>
	}
}

export default Index